<template>
  <n-config-provider
    :theme="theme.mode"
    :theme-overrides="theme.config"
    :locale="zhCN"
    :date-locale="dateZhCN"
  >
    <n-message-provider>
      <n-dialog-provider>
        <div :class="theme.class">
          <MessageContent />
          <router-view />
        </div>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>
<script setup lang="ts">
  import { zhCN, dateZhCN, NConfigProvider, darkTheme } from 'naive-ui'
  import { darkThemeOverrides, lightThemeOverrides } from '@/theme/overrides'
  import { RouterView } from 'vue-router'
  import useStore from './stores'
  import { storeToRefs } from 'pinia'
  import MessageContent from '@/components/MessageContent/index.vue'

  const { config } = useStore()
  const { globalConfig } = storeToRefs(config)

  const theme = computed(() => ({
    mode: globalConfig.value.theme === 'light' ? null : darkTheme,
    config: globalConfig.value.theme === 'light' ? lightThemeOverrides : darkThemeOverrides,
    class: globalConfig.value.theme === 'light' ? '' : 'dark-theme'
  }))
</script>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  #app {
    height: 100vh;
    width: 100vw;
  }
</style>
